<!--
 * @FilePath     : /study_code/layui/19-1-7.html
 * @Description  : tree 实例事件
 * @Date         : 2025-04-13 11:05:42
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-14 14:30:53
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <p>默认菜单是展开的</p>
    <button class="btn1">收起（所有）节点</button>
    <button class="btn6">展开某个节点 （子节点不展开）</button>
    <button class="btn61">展开某个节点2（所有子节点都展开）</button>
    <br />
    <button class="btn2">展开（所有）节点</button>
    <button class="btn7">折叠某个节点</button>
    <button class="btn71">折叠某个节点（所有子节点也折叠）</button>
    <br />
    <button class="btn3">获取选中节点</button>
    <br />
    <button class="btn4">获取某个特定节点</button>
    <br />
    <button class="btn5">获取所有节点</button>
    <br />
    <button class="btn8">勾选勾选某个节点</button>
    <button class="btn81">取消勾选某个节点</button>
    <br />
    <button class="btn9">禁用 某个节点</button>
    <button class="btn91">解禁 某个节点</button>
    <br />
    <button class="btn10">全选</button>
    <button class="btn101">取消全选</button>
    <br />
    <button class="btn11">某个父节点下，根据属性搜索节点</button>

    <hr />
    <div id="demo"></div>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/layui-treetable/common.js"></script>
    <script>
      layui
        .config({
          base: '/layui/extends_modules',
        })
        .extend({
          treetable: '/layui-treetable/treetable',
        })
        .use(['form', 'treetable', 'layer'], function () {
          var layer = layui.layer,
            form = layui.form,
            $ = layui.jquery,
            treetable = layui.treetable

          var tree = layui.treetable({
            elem,
            spreadable,
            checkbox,
            layout,
            nodes,
          })

          form.render()

          // --------------
          $('.btn1').on('click', function () {
            tree.collapse()
          })

          $('.btn2').on('click', function () {
            tree.expand()
          })

          $('.btn3').on('click', function () {
            const result = tree.getSelected()
            console.log(3, '获取选中节点', result)
          })

          $('.btn4').on('click', function () {
            const result4 = tree.getNode(2)
            console.log(4, '获取某个选中的节点', result4)
          })

          $('.btn5').on('click', function () {
            const result5 = tree.getNodes(2)
            console.log(5, '获取所有节点', result5)
          })

          $('.btn6').on('click', function () {
            var node = tree.getNode('2')
            tree.expandNode(node, false)
          })

          $('.btn61').on('click', function () {
            var node = tree.getNode('2')
            tree.expandNode(node, true)
          })

          $('.btn7').on('click', function () {
            var node = tree.getNode('2')
            tree.collapseNode(node, false) // 子节点不折叠
          })

          $('.btn71').on('click', function () {
            var node = tree.getNode('11')
            tree.collapseNode(node, true)
          })

          $('.btn8').on('click', function () {
            var node = tree.getNode('11')
            tree.checkNode(node, true)
          })

          $('.btn81').on('click', function () {
            var node = tree.getNode('11')
            tree.checkNode(node, false)
          })

          $('.btn9').on('click', function () {
            var node = tree.getNode('1')
            tree.setChkDisabled(node, true)
          })

          $('.btn91').on('click', function () {
            var node = tree.getNode('1')
            tree.setChkDisabled(node, false)
          })

          $('.btn10').on('click', function () {
            tree.checkAllNodes(true)
          })

          $('.btn101').on('click', function () {
            tree.checkAllNodes(false)
          })

          $('.btn11').on('click', function () {
            const result111 = tree.getNodeByParam('name', '子节点12', tree.getNode('1')) // 在节点1下查找 名称 name 为 字节节点21 的节点
            console.log(11, '节点', result111)
          })
        })
    </script>
  </body>
</html>
